<template>
	<view class="bg">
		<img class="bg_img" src="@/static/bg.png" alt="">
		<div class="box">
			<div class="logo_text">
				<img class="logo" src="@/static/logo.png" alt="">
				<span class="title">用 户 登 录</span>
			</div>


			<div class="form" v-show="loginType == 1">

				<!-- 账号密码登录 -->
				<up-form labelPosition="left" :model="queryDate" ref="form1">
					<up-form-item label="账号" prop="queryDate.userName" borderBottom>
						<up-input v-model="queryDate.userName" border="surround"></up-input>
					</up-form-item>
					<up-form-item label="密码" prop="queryDate.password">
						<up-input password v-model="queryDate.password" border="surround"></up-input>
					</up-form-item>
				</up-form>
				<!-- 忘记密码 -->
			</div>
			<!-- 手机号登录 -->
			<div class="form" v-show="loginType == 2">
				<up-form labelPosition="left" :model="queryDate" ref="form1">
					<up-form-item labelWidth="62" label="手机号" prop="queryDate.phone" borderBottom>
						<up-input v-model="queryDate.phone" border="surround"></up-input>
					</up-form-item>
					<up-form-item labelWidth="62" label="验证码" prop="queryDate.code" borderBottom>
						<up-input v-model="queryDate.code" border="surround"></up-input>
						<template #right>
							<up-button :disabled="btnDisabled" @click="getCode" type="primary" :text="countdownText">
							</up-button>
						</template>
					</up-form-item>
				</up-form>
			</div>
			<div class="btn">
				<up-button type="warning" text="登录" @click="showToast"></up-button>
				<div class="login_btn"></div>
				<up-button @click="changeType" type="warning" :plain="true" :text="loginType == 1?'手机号登录':'账号密码登录'">
				</up-button>
			</div>

		</div>


		<up-toast ref="uToastRef"></up-toast>
		<up-notify ref="uNotifyRef" message="Hi uview-plus"></up-notify>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		apiLogin,apiPhoneLogin
	} from "@/api/user.js"
	const queryDate = ref({
		userName: "",
		password: "",
		phone: "",
		code: ""
	})
	const notifyShow = ref(false)
	const uNotifyRef = ref(null);
	const code = ref("")
	const uToastRef = ref(null)
	//表单类型
	const loginType = ref(1)
	const timeout = ref(null)
	const m_sum = ref(10)
	const countdownText = ref("获取验证码")
	const btnDisabled = ref(false)


	//校验手机号
	const isPhone = (str) => {
		var reg = /^1[3456789]\d{9}$/;
		return reg.test(str) ? true : false
	}


	const changeType = () => {
		if (loginType.value == 1) {
			loginType.value = 2
		} else {
			loginType.value = 1
		}
	}
	//获取验证码
	const getCode = () => {
		//判断手机号是否合格的
		if (!isPhone(queryDate.value.phone)) {
			return uToastRef.value.show({
				type: 'error',
				icon: false,
				title: '错误',
				message: "错误的手机号",
				iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
			})
		}
		queryDate.value.code = getVerificationCode()
		countdownText.value = '倒计时还有10秒'
		m_sum.value = 10
		btnDisabled.value = true
		timeout.value = setInterval(() => {
			m_sum.value--;
			countdownText.value = `倒计时还有${m_sum.value}秒`
			if (m_sum.value == 0) {
				clearInterval(timeout.value)
				countdownText.value = "获取验证码"
				btnDisabled.value = false
			}
		}, 1000)

	}


	let getVerificationCode = (codeLength = 4) => { //传入需要的字符串长度，不传默认为4
		// 准备一个用来抽取码的字符串，或者字典
		// let verification_code_str = "abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";  //数字和字母
		let verification_code_str = "0123456789"; //纯数字
		// 获取某个范围的随机整数，封装的函数，在上面抽取字典的时候进行了调用
		function getRandom(min, max) { //意思是获取min-max数字之间的某个随机数，直接调用即可
			return Math.round(Math.random() * (max - min) + min);
		}
		let newStr = ''; //创建一个空字符串，用来拼接四位随机码
		for (var i = 0; i < codeLength; i++) { //for循环四次，则拼接四次随机码
			newStr += verification_code_str[getRandom(0, verification_code_str.length - 1)]; //从字典中随机选一个下标，并拼接到空字符串中
		}
		return newStr
	}

	//toast提示
	const showToast = async (params) => {
		try {
			let res;
			if (loginType.value == 1) {

				//账号密码登录
				//账号密码登录
				 res = await apiLogin({
					userName: queryDate.value.userName,
					password: queryDate.value.password
				})
				if(res.data.emp.type != 2){
					return uni.showToast({
						title:"登录账号身份不匹配",
						icon:"none"
					})
				}
			
			} else {
				if(!queryDate.value.code){
					return uni.showToast({
						title:"请填入验证码",
						icon:"none"
					})
				}
				//手机号登录
				res = await apiPhoneLogin({
					phone:queryDate.value.phone
				})
				console.log(res)
			}
			uni.setStorage({
				key: "authorization",
				data: res?.data?.token || null
			})
			uni.setStorage({
				key: "empleyeeInfo",
				data: res?.data?.emp || null
			})

		} catch (err) {
			console.log(err)
		}
		// 登录完成之后跳转到首页
		uni.redirectTo({
			url:"/pages/index/index"
		})
		// uToastRef.value.show({
		// 	type: 'loading',
		// 	title: '正在加载',
		// 	message: "正在加载",
		// 	iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png'
		// })
	}
</script>

<style scoped lang="scss">
	.bg {
		width: 100vw;
		height: 100vh;
		// background: #f5b017;

		box-sizing: border-box;
		position: relative;

		.form {
			margin-bottom: 60rpx;
		}

		.bg_img {
			position: absolute;
			z-index: -1;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}

		.box {
			position: absolute;
			top: 52%;
			left: 50%;
			transform: translate(-50%, -60%);
			width: 70%;
			height: 550rpx;
			background: #fff;
			border-radius: 20rpx;
			background: rgba($color: #ffffff, $alpha: 0.6);
			box-shadow: 0px 16rpx 32rpx 4rpx rgba($color: #b97d03, $alpha: 0.8);
			padding: 40rpx;

			.btn {
				.login_btn {
					margin-bottom: 20rpx !important;
				}
			}

			.logo_text {
				width: 100%;
				// height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20rpx;

				.logo {
					width: 100rpx;
					height: 100rpx;
				}

				.title {
					font-size: 52rpx;
					color: #b97d03;
				}
			}

		}
	}

	.verification {
		margin-left: 20rpx;
	}
</style>
